<script setup>
import { ref, defineProps } from "vue"

const props = defineProps({
  data: Number,
  loading: Boolean
})
const time =ref(15*60*1000)
// 普通 订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退
// 熊猫 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消
const getTypeText = () => {
  const type = props.data.status
  console.log('type', type)
  if (type === 0) {
    return {
      text: '待支付',
      color: '#ED6316'
    }
  }
  if (type === 11) {
    return {
      text: '待使用',
      color: '#999999'
    }
  }
  if (type === 3) {
    return {
      text: '已完成',
      color: '#999999'
    }
  }
  if (type === 6) {
    return {
      text: '已取消',
      color: '#999999'
    }
  }
  return {
    text: '退款单',
    color: '#999999'
  }
}
// 倒计时结束触发
function handelfinish() {
  console.log(132);
}
</script>

<template>
  <div class="type">
    <template v-if="!loading">
      <div class="type_header">
        <img v-if="data.status === 0" src="@/assets/images/icons/noPay.png" alt="">
        <img v-else-if="data.status === 11" src="@/assets/images/icons/not-used.png" alt="">
        <img v-else-if="data.status === 2" src="@/assets/images/icons/complete.png" alt="">
        <img v-else-if="data.status === 3" src="@/assets/images/icons/close.png" alt="">
        <img v-else-if="data.status === 4" src="@/assets/images/icons/refunding.png" alt="">
        <img v-else-if="data.status === 5" src="@/assets/images/icons/refunding2.png" alt="">
        <span class="type_text" :style="{ color: getTypeText().color }">
        {{ getTypeText().text }}
      </span>
      </div>

      <!--    <van-count-down v-if="props.data.status == '0'" :time="time" @finish=handelfinish>-->
      <!--      <template #default="timeData">-->
      <!--        <span class="time">支付剩余时间：</span>-->
      <!--        <span class="time">{{ timeData.minutes }}</span>-->
      <!--        <span class="time">分</span>-->
      <!--        <span class="time">{{ timeData.seconds }}</span>-->
      <!--        <span class="time">秒</span>-->
      <!--      </template>-->
      <!--    </van-count-down>-->

      <van-count-down v-if="props.data.status == '1'" :time="time">
        <span class="time-use">需至少提前一天电话询问商家预约</span>
      </van-count-down>
      <img class="bg_img" src="@/assets/images/index/bg.png" alt="">
    </template>

    <van-skeleton v-else>
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <div :style="{ flex: 1 }">
            <van-skeleton-paragraph row-width="30%" />
            <van-skeleton-paragraph row-width="60%" />
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
</template>

<style scoped lang="scss">
.type {
  position: relative;
  z-index: 1;
  padding: 3.5rem 1.5rem .5rem 1.5rem;
  height: 10rem;
  box-sizing: border-box;

  .type_header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;

    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-right: .8rem;
    }

    .type_text {
      font-size: 2.4rem;
      font-weight: normal;
    }
  }

  .time {
    font-size: 1.4rem;
    color: #999999;
    line-height: 1.6rem;
  }

  .time-use {
    color: #ED6316;
    font-size: 1.4rem;
    font-weight: 600;
  }

  .bg_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
  }
}
</style>